<template>
  <div>
    <!--上传组件-->
    <el-upload
            class="upload-demo lucency-sm"
            drag
            :action="uploadPath"
            multiple
            name="file"
            :data="userInfo"
            :on-success="handleSuccess">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em> </div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif文件，且不超过2mb</div>
    </el-upload>

    <el-row class="text-align-center margin-top-10">
      <el-col :span="12" :push="6">
        <div class="text-align-center">
          <el-card v-show="pictureCardVisible" class="box-background-color-black lucency-sm margin-top-10 text-align-center">
            <span class="text-color-white">图片外链 </span><el-input :readonly="true" v-model="uploadResponse.url" class="box-background-color-black width-350 margin-right-10"></el-input>
            <el-button size="medium" type="info" @click="handleCopyUrl(uploadResponse.url)"> 复制链接</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>

  // jwt 解析token
  import jwtDecode from 'jwt-decode'

  export default {
    name: "Upload",
    data() {
      return {
        /*上传路径*/
        //服务器
        uploadPath: "http://123.57.136.136:8888/api/private/figure/upload",
        // 本地
        // uploadPath: "http://localhost:8888/api/private/figure/upload",
        /*user信息*/
        userInfo: {},
        /*服务器上传后返回的数据*/
        uploadResponse: {},
        /*照片外链的显示*/
        pictureCardVisible: false,
        /*上传失败的错误信息*/
        uploadErrorMsg: "",
      }
    },
    methods: {
      handleSuccess(response, file, fileList) {
        console.log(response);
        //如果上传失败
        if (response.meta.status !== 200){
          this.pictureCardVisible = false
          this.uploadErrorMsg = response.meta.message
          if (this.uploadErrorMsg === '' || this.uploadErrorMsg === undefined) {
            this.uploadErrorMsg = "上传失败!"
          }
          this.$message.error(this.uploadErrorMsg)
        }
        //上传成功
        this.uploadResponse = response.data
        this.pictureCardVisible = true
        console.log(this.uploadResponse);
      },
      //复制
      handleCopyUrl(url) {
        // 创建一个 Input标签
        const cInput = document.createElement('input')
        cInput.value = url
        document.body.appendChild(cInput)
        cInput.select() // 选取文本域内容;
        // 执行浏览器复制命令
        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
        // Input要在正常的编辑状态下原生复制方法才会生效
        document.execCommand('Copy')
        this.$message.success("复制成功")
        /// 复制成功后再将构造的标签 移除
        cInput.remove()
      },
    },
    created() {
      const token = jwtDecode(window.sessionStorage.getItem("token"))

      if (token.userid !== null) {
        this.$http.get(`user/${token.userid}`).then(result => {
          if (result.data.meta.status != 200) return this.$message.error(result.data.meta.message)
          this.userInfo = result.data.data
          console.log(this.userInfo);
        })
      }
    }
  }
</script>

<style scoped>


  .upload-demo {
    text-align: center!important;
  }

  .el-upload-dragger .el-upload__text {
    color: #f5f5ff;
    font-size: 14px;
    text-align: center;
  }

  .el-upload__tip {
    color: #f5f5ff;
  }
  .width-350{
    width: 350px!important;
  }

</style>